<template>
  <div class="centent">
    <div class="cnetext-top">
      <span class="iconfont icon-zuojiantou" @click="fun1()"></span>
      <div class="cnetext-top-right">
          添加新地址
      </div>
    </div>
    
      <van-address-edit
  :area-list="areaList"
  show-postal
  show-delete
  show-set-default
  show-search-result
  :search-result="searchResult"
  :area-columns-placeholder="['请选择', '请选择', '请选择']"
  @save="onSave"
  @delete="onDelete"
  @change-detail="onChangeDetail"
/>
  </div>
</template>

<script>
import { AddressEdit } from 'vant';
import { Toast } from 'vant';
import Vue from 'vue';
Vue.use(AddressEdit);
export default {
data() {
    return {
      areaList:"",
      searchResult: [],
    };
  },
  methods: {
     fun1(){
            this.$router.go(-1)
        },
    onSave() {
      Toast('save');
    },
    onDelete() {
      Toast('delete');
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: '黄龙万科中心',
            address: '杭州市西湖区',
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
  },
}
</script>

<style scoped>
.centent {
  width: 100%;
  height: 100%;
}
.cnetext-top {
  width: 90%;
  height: 0.6rem;
  display: flex;
  font-size: .2rem;
  line-height: .3rem;
    margin: auto;
  margin-top: .1rem;
  background: white;

}
.cnetext-top-right{
    flex: 1;
    text-align: center;
}
</style>